<template>
  <div class="approva-notice">
    <je-form-item
      :label="$t('ApprovaNotice.flowSponsor')"
      :label-col="{ span: 7 }"
      name="processInitiator"
    >
      <je-switch v-model:value="formState.processInitiator" mode="checkbox" />
      <span class="prompt">{{ $t('ApprovaNotice.flowSponsorContext') }}</span>
    </je-form-item>

    <je-form-item
      :label="$t('ApprovaNotice.processApprovedPersonnel')"
      :label-col="{ span: 7 }"
      name="thisNodeApproved"
    >
      <je-switch v-model:value="formState.thisNodeApproved" mode="checkbox" />
      <span class="prompt">{{ $t('ApprovaNotice.processApprovedPersonnelContext') }}</span>
    </je-form-item>

    <je-form-item
      :label="$t('ApprovaNotice.ApprovedLead')"
      :label-col="{ span: 7 }"
      name="thisNodeApprovalDirectlyUnderLeader"
    >
      <je-switch v-model:value="formState.thisNodeApprovalDirectlyUnderLeader" mode="checkbox" />
      <span class="prompt">{{ $t('ApprovaNotice.ApprovedLeadContext') }}</span>
    </je-form-item>

    <je-form-item
      :label="$t('ApprovaNotice.ApprovedDeptLead')"
      :label-col="{ span: 7 }"
      name="thisNodeApprovalDeptLeader"
    >
      <je-switch v-model:value="formState.thisNodeApprovalDeptLeader" mode="checkbox" />
      <span class="prompt">{{ $t('ApprovaNotice.ApprovedDeptLeadContext') }}</span>
    </je-form-item>
    <div class="info">
      <span class="p">
        {{ $t('ApprovaNotice.context') }}
      </span>
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Form, Switch } from '@jecloud/ui';

  export default defineComponent({
    name: 'ApprovaNotice',
    components: {
      JeFormItem: Form.Item,
      JeSwitch: Switch,
    },
    props: {
      approvalNotice: {
        type: Object,
        defalut: () => {
          return {};
        },
      },
      nodeId: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      //表单数据
      const formState = ref(props.approvalNotice);

      //监听节点Id变化重置数据
      watch(
        () => props.nodeId,
        () => {
          formState.value = props.approvalNotice;
        },
      );
      return { formState };
    },
  });
</script>
